<template>
	<view>
		<view class="avatar" @click="changeAvatar">
			<image :src="avatar" mode="scaleToFill"></image>
			<view class="edit iconfont icon-edit"></view>
		</view>

		<view class="history">
			<view class="box" v-for="(url,index) in avatarList" key="index" @click="chooseAvatar(index)">
				<image :src="url" mode="scaleToFill"></image>
			</view>
		</view>

		<button type="warn" @click="reset">重置</button>
	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive,
		onMounted
	} from 'vue';
	export default {
		// onShow() {
		// 	// this.avatarList = JSON.parse(uni.getStorageSync("historyAvatar"));
		// 	console.log('onLoad', (this.avatarList));

		// 	if (!this.avatarList.length) {
		// 		this.avatar = "/static/default-avatar.png";
		// 	} else {
		// 		this.avatar = this.avatarList[0];
		// 	}
		// },
		setup() {
			const avatar = ref("/static/default-avatar.png");
			//历史头像记录
			const avatarList = ref([]);


			const changeAvatar = () => {
				//选择图片
				uni.chooseImage({
					count: 1,
					sourceType: ["album"],
					success(res) {
						// console.log(res);
						uni.showLoading({
							title: '上传中...'
						})

						avatar.value = res.tempFilePaths[0];
						//上传图片
						uni.uploadFile({
							url: "https://test.galayun.com/smallprogapi/appcirclepost/PostUniImages",
							filePath: avatar.value,
							name: "avatar",
							success(upRes) {
								// console.log(upRes);
								avatar.value = JSON.parse(upRes.data).data.Data[0];
								uni.hideLoading()
								uni.showToast({
									title: "更新成功",
									icon: 'success'
								})

								//添加历史记录
								// avatarList.value.push(avatar.value);
								//追加一个新元素
								avatarList.value = [avatar.value, ...avatarList.value];

								//缓存数据
								uni.setStorageSync("historyAvatar", avatarList.value);

							}
						})

						//缓存图片历史
					}
				})
			}

			//使用vue的生命周期钩子,可以获取到localstorage的值
			onMounted(() => {
				avatarList.value = uni.getStorageSync("historyAvatar");
				console.log(avatarList.value)
				if (avatarList.value.length == 0) {
					avatar.value = "/static/default-avatar.png";
				} else {
					avatar.value = avatarList.value[0];
				}
			})

			const chooseAvatar = (i) => {
				avatar.value = avatarList.value[i];
			}


			const reset = () => {
				avatarList.value = [];
				uni.clearStorageSync("historyAvatar")
				avatar.value = "/static/default-avatar.png";
			}

			return {
				changeAvatar,
				avatar,
				avatarList,
				chooseAvatar,
				reset
			}

		}
	}
</script>

<style scoped lang="scss">
	@import url("https://at.alicdn.com/t/c/font_3630446_g61y3r5qe8g.css");

	.avatar,
		{
		width: 200rpx;
		height: 200rpx;
		margin: 80rpx auto;
		border: 1rpx #ccc solid;
		border-radius: 50%;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.edit {
			position: absolute;
			top: 5rpx;
			right: 5rpx;
			color: #FFF;
			background-color: #d94a4c;
			border-radius: 50%;
			font-weight: 300;
		}
	}

	.box {
		width: 150rpx;
		height: 150rpx;
		margin-right: 15rpx;
		border: 1rpx #ccc solid;
		display: inline-block;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
